
<template>

    <p>组合式API</p>
    <p>count:{{ count }}</p>
    <p>test:{{ test }}</p>


    <p>reactive=============</p>
    <p>obj :{{ obj }}</p>
    <p>obj的名字 :{{ obj.name }}</p>
    <p>obj的年龄: {{ obj.age }}</p>

    <p>computed ==========</p>
    <p>countAddFive : {{ countAddFive }}</p>
    <p>objAgeAddFive: {{ objAgeAddFive }}</p>

    <button @click="countAddOne">count+1</button>
    <button @click="updateObj">更新obj</button>


    <GlobalComDemo />
    xxx
</template>

<script setup>
// 1. 引入api
import {ref,reactive, computed, watch} from 'vue'

const count = ref(0)
const test = ref('hello world')

// alert(count)
// alert(count.value)
// alert(test.value)
const obj = reactive(
    {
        name:'tom',
        age:12
    }
)
// alert(obj.name)
// alert(obj.name)

const countAddFive = computed(
    () => {
        return count.value +5
    }
)

const objAgeAddFive = computed(
    ()=>{
        return obj.age + 5
    }
)

function countAddOne(params) {
    count.value++
}


// function updateObjName() {
//     obj.name = 'jerry'
// }
const updateObj = () =>{
    updateObjName()
}

const updateObjName = () =>{
    obj.name = 'jerry'
}

// es6  ecmascript javaScript 



// 2. 调用api
// 3. 实现逻辑
watch(count, (newVal, oldVal)=>{
    console.log('newVal',newVal);
    console.log('oldVal', oldVal);
})


watch(countAddFive, (newVal, oldVal)=>{
    console.log('computed newVal',newVal);
    console.log('computed oldVal', oldVal);
})


watch(obj, (newVal, oldVal)=>{
    console.log('obj newVal',newVal);
    console.log('obj oldVal', oldVal);
})

watch(()=> obj.name, (newVal, oldVal)=>{
    console.log('obj.name newVal',newVal);
    console.log('obj.name oldVal', oldVal);
})


</script>